<template>
  <div>
    <nav-bar>
      <div slot="left" @click="ivBack">
        <img src="../assets/image/iv_back.png" width="30" height="30" alt="" />
      </div>
    </nav-bar>
    <p class="title">注册</p>

    <div class="login-user user-phone">
      <img width="20" height="20" src="~assets/image/login_phone.png" alt="" />

      <van-cell-group>
        <van-field v-model="phone" type="tel" placeholder="请输入手机号" />
      </van-cell-group>
    </div>
    <div class="login-user user-top">
      <img
        width="20"
        height="20"
        src="~assets/image/register_verificationcode.png"
        alt=""
      />

      <van-cell-group class="verificationCode">
        <van-field
          v-model="verificationCode"
          type="text"
          placeholder="请输入验证码"
        />
      </van-cell-group>

      <span></span>

      <p class="version" @click="getVerificationCode">
        {{ tVerificationCode }}
      </p>
    </div>
    <div class="login-user user-top">
      <img
        width="20"
        height="20"
        src="~assets/image/login_password.png"
        alt=""
      />
      <van-cell-group>
        <van-field
          v-model="password"
          type="password"
          placeholder="请输入长度6-16位密码"
        />
      </van-cell-group>
    </div>
    <div class="login-user user-top">
      <img
        width="20"
        height="20"
        src="~assets/image/register_recommender.png"
        alt=""
      />
      <van-cell-group>
        <van-field
          v-model="invitees"
          type="tel"
          placeholder="请输入邀请人手机号"
        />
      </van-cell-group>
    </div>

    <div class="register-count">
      <div @click="isReads">
        <img :src="isRead" alt="" width="15" height="15" />
        我已阅读并同意
      </div>
      <span @click="InviteesClick">《乐享生活服务协议》</span>
    </div>
    <van-button block @click="register">注册</van-button>
  </div>
</template>
<script>
import { getApiSms, getApiRegister } from "../network/ApiServe";
import NavBar from "../common/NavBar.vue";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      phone: "",
      verificationCode: "",
      password: "",
      invitees: "",
      isckbox: false,
      timeSS: 60,
      tVerificationCode: "获取验证码",
      isckboxNo: require("../assets/image/login_ck_no.png"),
      isckboxYes: require("../assets/image/login_ck_yes.png"),
    };
  },
  computed: {
    isRead() {
      return this.isckbox ? this.isckboxYes : this.isckboxNo;
    },
  },
  methods: {
    ivBack() {
      this.$router.back(-1);
    },
    getVerificationCode() {
      console.log("tVerificationCode");
      if (this.phone.length != 11) {
        this.$toast("请输入手机号码或者手机号码格式不正确");
        return;
      }
      const timer = setInterval(() => {
        this.timeSS--;
        if (this.timeSS === 0) {
          this.timeSS = 60;

          this.tVerificationCode = "获取验证码";
          clearInterval(timer);
          return;
        }
        this.tVerificationCode = "剩余" + this.timeSS + "s";
      }, 1000);

      getApiSms(this.phone)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.$toast(res.resp_message);
          } else {
            this.$toast(res.resp_message);
          }
        })
        .catch((err) => {
          console.log("getApiSms" + err);
        });
    },
    isReads() {
      this.isckbox = !this.isckbox;
    },
    register() {
      console.log("register");
      if (this.phone.length != 11) {
        this.$toast("请输入手机号码或者手机号码格式不正确");
        return;
      }
      if (this.verificationCode.length == 0) {
        this.$toast("请输入验证码");
        return;
      }
      if (this.password.length == 0) {
        this.$toast("请输入密码");
        return;
      }
      if (!this.isckbox) {
        this.$toast("请先阅读用户协议");
        return;
      }
      getApiRegister(
        this.phone,
        this.verificationCode,
        this.password,
        this.invitees
      )
        .then((res) => {
          if (res.resp_code === "000000") {
            this.$toast(res.resp_message);
            // 返回登录页
            this.$router.back(-1);
          } else {
            this.$toast(res.resp_message);
          }
        })
        .catch((err) => {
          console.log("register" + err);
        });
    },
    InviteesClick() {
      this.$router.push("invitees");
    },
  },
};
</script>
<style scoped>
.title {
  font-size: 29px;
  margin-top: 30px;
  margin-left: 44px;
}
img {
  vertical-align: bottom;
}
.login-user {
  width: 287px;
  height: 55px;
  line-height: 55px;
  margin: 0 auto;
  background-color: #f5f5f5;
  border-radius: 3px;
  padding-left: 18px;
  padding-right: 15px;
  text-align: center;
  align-items: center;
  display: flex;
}
.user-phone {
  margin-top: 25.5px;
}
.user-top {
  margin-top: 20px;
}
.login-user span {
  width: 1px;
  height: 23px;
  background-color: #d8d8d8;
  margin-left: 11.5px;
  margin-right: 13px;
  justify-items: center;
}

.van-cell-group {
  margin-left: 12px;
}
.verificationCode {
  width: 100px;
}
.version {
  flex: 1;
  color: #f1ce8a;
  font-size: 16px;
}
.van-field {
  background-color: #f5f5f5;
  padding: 0;
}
.register-count {
  margin-top: 27px;
  display: flex;
  justify-content: center;
  font-size: 15px;
  text-align: center;
}
.register-count span {
  color: #f1ce8a;
}
.van-button {
  width: 287px;
  margin: 43.5px auto 0;
  background-color: #121212;
  color: #f1ce8a;
  font-size: 17px;
  text-align: center;
}
</style>